<template>
	<view class="page-content" style="background-color: rgb(19, 31, 79);">
		<view class="topBg">
			<u-navbar title="商业合作" @rightClick="rightClick" :autoBack="true" :bgColor="barTopBg" leftIconColor="#fff"
				titleStyle="color:#fff" :placeholder="true">
			</u-navbar>
			<view class="display_col_center c_ffffff">
				<text class="text1">达人内容营销平台</text>
				<text class="text2">让营销变现更简单</text>
			</view>
		</view>

		<view class="bottomBg c_ffffff display_col_center">
			<text class="c_C62B2C subTitle">优势</text>
			<view class="itemBox1 display_col_center">
				<view class="good_item c_ffffff">
					<view class="display_row_center" style="justify-content: flex-start;">
						<view class="circ-text"></view>
						<text class="f_36" style="font-weight: 800;">拉新获客</text>
					</view>
					<view class="f_28" style="margin-left: 60rpx;">精准内容为切入点，引导用户下载并搜索指定关键词后深度内容交互，留存好，付费率高</view>
				</view>
				<view class="good_item c_ffffff">
					<view class="display_row_center" style="justify-content: flex-start;">
						<view class="circ-text"></view>
						<text class="f_36" style="font-weight: 800;">回流拉活</text>
					</view>
					<view class="f_28" style="margin-left: 60rpx;">精准内容触达，大量曝光，唤醒老用户，通过指定关键词搜索等方式，激活老用户与平台的深度交互</view>
				</view>
				<view class="good_item c_ffffff">
					<view class="display_row_center" style="justify-content: flex-start;">
						<view class="circ-text"></view>
						<text class="f_36" style="font-weight: 800;">品牌曝光</text>
					</view>
					<view class="f_28" style="margin-left: 60rpx;">等同信息流曝光，全平台KOC口碑营销，提高品牌影响力</view>
				</view>
			</view>

			<view class="mt-20" style="padding: 0 20rpx;">
				<view class="itemBox1" style="padding:40rpx 20rpx;">
					<u--input placeholder="请输入企业名称" border="surround" color="#fff" v-model="subData.name"></u--input>
					<view class="display_row_center mt-10">
						<u--input placeholder="请输入姓名" border="surround" color="#fff" v-model="subData.contact"
							:customStyle="{flex:'1',
						marginRight:'10rpx' }">
						</u--input>
						<u--input placeholder="请输入手机号" border="surround" color="#fff" v-model="subData.phone"
							:customStyle="{flex:'1'}">
						</u--input>
					</view>
					<u--input placeholder="请输入地址" border="surround" color="#fff" v-model="subData.adress"
						:customStyle="{marginTop:'10rpx' }"></u--input>
					<u--textarea placeholder="请输入说明" v-model="subData.des"
						:customStyle="{marginTop:'10rpx',backgroundColor:'#131F49 !important',color:'#fff !important'}">
					</u--textarea>
				</view>
			</view>

			<view style="padding: 0 20rpx;width: 100%;box-sizing: border-box;margin-bottom: 100rpx;">
				<view class="btmBox c_ffffff mt-20" @click="$u.throttle(subForm, 3000)">
					立即申请
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postSubContact
	} from '@/config/api.js'

	export default {
		data() {
			return {
				barTopBg: "transparent",
				subData: {
					name: "",
					contact: "",
					phone: "",
					adress: "",
					des: ""
				}
			}
		},
		onLoad() {},
		methods: {
			onPageScroll: function(e) {
				if (e.scrollTop == 0) {
					this.barTopBg = "transparent";
				} else if (e.scrollTop >= 40) {
					this.barTopBg = "#131F49";
				}
			},
			subForm() {
				postSubContact(this.subData).then(res => {
					uni.showToast({
						title: "申请成功！",
						duration: 2000,
						icon: 'success'
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		padding-top: 20rpx;
		height: 130rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.bgVip {
		position: relative;
	}

	.vipText {
		position: absolute;
		top: 3px;
		left: 80rpx;
	}

	.topBg {
		background-image: url('https://dtkj-qnyimg.diankuai.com/%E9%82%80%E8%AF%B7%E9%A1%B5%E9%9D%A2/%E5%9B%BE%E5%B1%82%201.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		min-height: 800rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.text1 {
		font-size: 60rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #fff;
	}

	.text2 {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.bottomBg {
		background-color: rgb(19, 31, 79);
	}

	.subTitle {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.itemBox1 {
		background-color: rgb(39, 55, 122);
		width: 95%;
		padding: 40rpx 0;
		justify-content: space-around;
		border-top-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
	}

	.good_item {
		padding: 20rpx;
	}

	.circ-text {
		min-height: 40rpx;
		min-width: 40rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		background-image: linear-gradient(to bottom, rgb(228, 164, 242), rgb(100, 110, 239));
	}

	/deep/ .u-textarea__field {
		color: #fff !important;
	}

	.btmBox {
		width: 100% !important;
		margin-left: 0 !important;
	}

	/deep/ .u-border {
		border-color: transparent !important;
	}

	/deep/ .u-input {
		background-color: #131F49;
	}
</style>
